<template>
  <div class="listCard">
    <div class="img_card ma_a">
      <el-row>
        <el-col :span="4"><img src="../../../assets/images/as1.png"
               alt=""></el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount  : 0}}</p>
          <p class="top-name">本年 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}}</p>
          <p class="top-name">本月 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}}</p>
          <p class="top-name">本日 (件)</p>
        </el-col>
      </el-row>
    </div>
    <div class="img_card ma_b">
      <el-row>
        <el-col :span="4"><img src="../../../assets/images/as2.png"
               alt=""></el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.overdueCount ? ymdTypeDueCountData.overdueCount : 0}}</p>
          <p class="top-name">超期件 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.unsatisfyCount ? ymdTypeDueCountData.unsatisfyCount : 0}}</p>
          <p class="top-name">不满意件 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.backCount ? ymdTypeDueCountData.backCount : 0}}</p>
          <p class="top-name">退回件 (件)</p>
        </el-col>
      </el-row>
    </div>
    <div class="img_card ma_c">
      <el-row>
        <el-col :span="4"><img src="../../../assets/images/as3.png"
               alt=""></el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.questionCount ? ymdTypeDueCountData.questionCount : 0}}</p>
          <p class="top-name">咨询服务 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.adviseCount ? ymdTypeDueCountData.adviseCount : 0}}</p>
          <p class="top-name">建议意见 (件)</p>
        </el-col>
        <el-col :span="4">
          <p class="top-value">{{ymdTypeDueCountData.complaintCount ? ymdTypeDueCountData.complaintCount : 0}}</p>
          <p class="top-name">投诉举报 (件)</p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ymdTypeDueCountData: {}
      }
    },
    created () {
      this.getYmdTypeDueCountsFn()
    },
    methods: {
      getYmdTypeDueCountsFn () {
        this.$axios.post(this.$api.homeCharts.ymdTypeDueCounts).then(rs => {
          if (rs) {
            this.ymdTypeDueCountData = rs
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .listCard {
    height: 440px;
    // overflow: auto;
    .img_card {
      width: 100%;
      height: calc(33.33% - 13.33px);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding-top: 40px;
      box-sizing: border-box;
      text-align: center;
      .top-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
    .ma_a {
      background: url('../../../assets/images/a1.png') top right no-repeat;
      background-size: 100% 100%;
      .top-value {
        color: #409eff;
      }
    }
    .ma_b {
      background: url('../../../assets/images/a2.png') top right no-repeat;
      background-size: 100% 100%;
      margin: 20px 0;
       .top-value {
        color: #FE795F;
      }
    }
    .ma_c {
      background: url('../../../assets/images/a3.png') top right no-repeat;
      background-size: 100% 100%;
       .top-value {
        color: #A765EE;
      }
    }
  }
</style>
